<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- AdThrive Head Tag Manual -->
    <script data-no-optimize="1" data-cfasync="false">
      (function (w, d) {
        w.adthrive = w.adthrive || {};
        w.adthrive.cmd = w.adthrive.cmd || [];
        w.adthrive.plugin = "adthrive-ads-manual";
        w.adthrive.host = "ads.adthrive.com";
        var s = d.createElement("script");
        s.async = true;
        s.referrerpolicy = "no-referrer-when-downgrade";
        s.src =
          "https://" +
          w.adthrive.host +
          "/sites/643436a4e6d20859e40a446b/ads.min.js?referrer=" +
          w.encodeURIComponent(w.location.href) +
          "&cb=" +
          (Math.floor(Math.random() * 100) + 1);
        var n = d.getElementsByTagName("script")[0];
        n.parentNode.insertBefore(s, n);
      })(window, document);
    </script>
    <!-- End of AdThrive Head Tag -->

    <meta charset="utf-8" />
    <title>Split screen for several plots</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta
      name="description"
      content="Using d3.js to create a very basic histogram"
    />
    <meta
      name="keywords"
      content="Data,Dataviz,Datavisualization,Javascript, JS, d3.js"
    />
    <meta name="author" content="Yan Holtz" />

    <meta property="og:title" content="Very basic histogram in d3.js" />
    <meta property="og:image" content="img/overview_RGG.png" />
    <meta
      property="og:description"
      content="Using d3.js to create a very basic histogram"
    />
    <title>Split screen for several plots</title>

    <!-- Bootstrap core CSS -->
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Custom fonts for this template -->
    <link
      href="../vendor/font-awesome/css/font-awesome.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat:400,700"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Kaushan+Script"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700"
      rel="stylesheet"
      type="text/css"
    />

    <!-- Custom styles for this template -->
    <link href="../css/agency.css" rel="stylesheet" />

    <!-- PRISM -->
    <script src="../LIB/prism.js"></script>
    <link href="../LIB/prism.css" rel="stylesheet" />

    <!-- D3.JS v4 -->
    <script src="https://d3js.org/d3.v5.js"></script>

    <!-- JQUERY -->
    <script src="../vendor/jquery/jquery.min.js"></script>

    <!-- HTML TO CANVAS -->
    <script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>

    <!-- Function to parse html and js code chunks made by Yan Holtz -->
    <script src="../js/myParser.js"></script>
  </head>

  <body id="page-top">
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg fixed-top" id="mainNav">
      <div class="container">
        <a class="js-scroll-trigger" href="../index.html"
          >D3.js Graph Gallery</a
        >
        <button
          class="navbar-toggler navbar-toggler-right"
          type="button"
          data-toggle="collapse"
          data-target="#navbarResponsive"
          aria-controls="navbarResponsive"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          Menu
          <i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav text-uppercase ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="CONTENT/optimization.html">R</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="CONTENT/private_API.html">Python</a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link js-scroll-trigger"
                href="CONTENT/arbitrage.html"
                >Data to viz</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">Who am I</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">About</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Header -->
    <header class="masthead" style="padding-top: 150px; padding-bottom: 80px">
      <div class="textlanding">
        <p style="display: inline; font-size: 35px">
          Split screen for several plots
        </p>
        <hr
          style="
            width: 100px;
            height: 1px;
            border: none;
            color: #333;
            background-color: #333;
          "
        />
        <br />
        <ul class="list-inline social-buttons">
          <li class="list-inline-item">
            <a href="https://twitter.com/R_Graph_Gallery">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
          <li class="list-inline-item social-buttons">
            <a href="https://github.com/holtzy">
              <i class="fa fa-github" style="color: white"></i>
            </a>
          </li>
          <li class="list-inline-item social-buttons">
            <a href="https://www.linkedin.com/in/yan-holtz-2477534a/">
              <i class="fa fa-linkedin"></i>
            </a>
          </li>
        </ul>
        <br /><br />
        <p style="max-width: 700px; margin: auto">
          This is a graph done in d3.js. Visit the basic section of the d3.js
          gallery for more examples.
        </p>
        <br />
        <a
          class="btn btn-secondary btn-md text-uppercase"
          href="../histogram.html"
          >Histogram section</a
        >
        <button
          class="btn btn-secondary btn-md text-uppercase"
          onclick="myCodeDownload('chart_example_from_d3-graph-gallery.html', 'code', 'codejs')"
        >
          Download code
        </button>
      </div>
    </header>

    <!-- ==================== GRAPH SECTION = WHERE THE GRAPH APPEARS ==================== -->

    <section class="bg-light" style="padding-top: 20px; padding-bottom: 20px">
      <div class="container">
        <div id="result"></div>
      </div>
    </section>

    <!-- ================================================================================= -->

    <!-- ==================== CODE SECTION = WHERE THE CODE APPEARS ==================== -->
    <section class="code-area" style="padding-top: 20px; padding-bottom: 20px">
      <div class="container">
        <!-- ========= show html code ============== -->
        <br />
        <div>
          <p>
            This examples aim to describe how to create several
            <code>svg</code> elements. It is important to understand that they
            will be placed one beside another, from the left to the right. Here,
            two svg elements are created, the first in green, the second in
            blue.<br />If there is no more place in a row, the div is placed
            below
          </p>
        </div>
        <aside>&larr; Edit me!</aside>
        <pre
          class="language-html"
        ><code id="code" contenteditable="true"><xmp><!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place. Give it a red border -->
<div id="my_dataviz" style="border: 2px solid red;"></div>

</xmp></code></pre>
        <!-- ==================================== -->

        <!-- ========= show JS code ==============  -->
        <aside>&larr; Edit me!</aside>
        <pre
          class="language-js"
        ><code id="codejs" contenteditable="true"><xmp><script>


// ------ ADD LEFT CHART AREA ---------

//set the dimensions and margins of the graph
var marginONE = {top: 20, right: 20, bottom: 20, left: 20},
    widthONE = 500 - marginONE.left - marginONE.right,
    heightONE = 400 - marginONE.top - marginONE.bottom;

// append a svg element with these width and height:
var svgONE = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", widthONE + marginONE.left + marginONE.right)
    .attr("height", heightONE + marginONE.top + marginONE.bottom)
  // Now create the graph area: it is the same but with a transition to respect margin !
  .append("g")
    .attr("transform", "translate(" + marginONE.left + "," + marginONE.top + ")");

// And show it in green
svgONE.append("rect")
  .attr("x", 0)
  .attr("y", 0)
  .attr("height", heightONE)
  .attr("width", widthONE)
  .style("stroke", "green")
  .style("fill", "none")
  .style("stroke-width", "2px");



// ------ ADD RIGHT CHART AREA ---------

//set the dimensions and margins of the graph
var marginTWO = {top: 20, right: 20, bottom: 20, left: 20},
    widthTWO = 300 - marginTWO.left - marginTWO.right,
    heightTWO = 400 - marginTWO.top - marginTWO.bottom;

// append a svg element with these width and height:
var svgTWO = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", widthTWO + marginTWO.left + marginTWO.right)
    .attr("height", heightTWO + marginTWO.top + marginTWO.bottom)
  // Now create the graph area: it is the same but with a transition to respect margin !
  .append("g")
    .attr("transform", "translate(" + marginONE.left + "," + marginONE.top + ")");

// And show it in green
svgTWO.append("rect")
  .attr("x", 0)
  .attr("y", 0)
  .attr("height", heightTWO)
  .attr("width", widthTWO)
  .style("stroke", "blue")
  .style("fill", "none")
  .style("stroke-width", "2px");

</script></xmp></code></pre>
        <!-- ==================================== -->

        <!-- ==================== JAVASCRIPT SECTION : EXECUTE THIS CODE AND MAKE IT INTERACTIVE ==================== -->
        <script>
          // At the beginning, I read the html and JS fragments
          myHtmlParser("code", "result");
          myJSParser("codejs", "result");

          // If the user change the JS fragment, I run it again:
          document
            .getElementById("codejs")
            .addEventListener("input", function () {
              d3.select("#result").html("");
              myHtmlParser("code", "result");
              myJSParser("codejs", "result");
            });

          // If the user change the HTML fragment, I run it again:
          document
            .getElementById("code")
            .addEventListener("input", function () {
              d3.select("#result").html("");
              myHtmlParser("code", "result");
              myJSParser("codejs", "result");
            });
        </script>
      </div>
    </section>

    <!-- ============================ -->

    <!-- ============================ RELATED BLOCKS ============================ -->

    <section
      id="contact"
      class="bg-light"
      style="padding-top: 70px; padding-bottom: 70px"
    >
      <div class="container">
        <div class="row">
          <div
            class="col-lg-5 text-center .align-middle"
            style="border-right: solid"
          >
            <div style="display: table; height: 150px; overflow: hidden">
              <div style="display: table-cell; vertical-align: middle">
                <h2 class="section-heading text-uppercase" style="color: black">
                  Related blocks
                </h2>
              </div>
            </div>
          </div>
          <div class="col-lg-5">
            <div style="display: table; height: 150px; overflow: hidden">
              <div style="display: table-cell; vertical-align: middle">
                <ul>
                  <li>
                    <i>add border to svg container in d3 - </i
                    ><a href="http://bl.ocks.org/AndrewStaroscik/5222370"
                      >link</a
                    >
                  </li>
                  <br />
                  <li>
                    <i>Multiple Simple graphs on one page - </i
                    ><a href="http://bl.ocks.org/d3noob/5987480">link</a>
                  </li>
                  <br />
                  <li>ll</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ============================ CONTACT SECTION ============================ -->

    <!-- ANCHOR -->
    <a name="contactanchor"></a>

    <section id="contact" class="bg" style="background-color: white">
      <div class="container">
        <div class="row">
          <div class="col-lg-2 text-center"></div>
          <div class="col-lg-8 text-center">
            <br /><br /><br />
            <h2 class="section-heading text-uppercase" style="color: black">
              Contact
            </h2>
            <p>
              This document is a work in progress analysis by Yan Holtz. Any
              feedback is highly encouraged. You can fill an issue on
              <a href="https://github.com/holtzy/data_to_viz">Github</a>, drop
              me a message on
              <a href="https://twitter.com/R_Graph_Gallery">Twitter</a>, or send
              an email pasting <a href="">yan.holtz.data</a> with
              <a href="">gmail.com</a>.
            </p>
            <div style="text-align: center">
              <a
                class="btn btn-primary btn-xl text-uppercase js-scroll-trigger"
                href="https://github.com/holtzy"
                >Github</a
              >
              <a
                class="btn btn-primary btn-xl text-uppercase js-scroll-trigger"
                href="https://twitter.com/R_Graph_Gallery"
                >Twitter</a
              >
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ============================ FOOTER SECTION ============================ -->
    <footer class="bg-light">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <span class="copyright"
              >Copyright &copy; the d3 graph gallery 2018</span
            >
          </div>
          <div class="col-md-4">
            <ul class="list-inline social-buttons">
              <li class="list-inline-item">
                <a href="https://twitter.com/R_Graph_Gallery">
                  <i class="fa fa-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="https://github.com/holtzy">
                  <i class="fa fa-github"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="https://www.linkedin.com/in/yan-holtz-2477534a/">
                  <i class="fa fa-linkedin"></i>
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-4">
            <ul class="list-inline quicklinks">
              <li class="list-inline-item">
                <a href="#">Privacy Policy</a>
              </li>
              <li class="list-inline-item">
                <a href="#">Terms of Use</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>

    <!-- ============================ -->

    <!-- ============================ JAVASCRIPT SECTION ============================ -->

    <!-- Bootstrap core JavaScript -->
    <script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <!--<script src="../vendor/jquery-easing/jquery.easing.min.js"></script> -->

    <!-- Contact form JavaScript -->
    <script src="../js/jqBootstrapValidation.js"></script>

    <!-- Custom scripts for this template -->
    <script src="../js/agency.min.js"></script>

    <!-- Activate the bootstrap tooltip, must be after jQuery load -->
    <script>
      $(function () {
        $('[data-toggle="tooltip"]').tooltip();
      });
    </script>

    <!-- Function to download the content of the div -->
    <script>
      function download() {
        var a = document.body.appendChild(document.createElement("a"));
        a.download = "export.html";
        var command = document.getElementById("code").innerHTML;
        command = command.replace(/<\/?span[^>]*>/g, "");
        a.href = "data:html" + command;
        a.click(); // Trigger a click on the element
      }
    </script>

    <!-- Function to download the graphic as png automatically -->
    <!--     <script>
        html2canvas($('#content'),
        {
          onrendered: function (canvas) {
            var a = document.createElement('a');
            // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
            a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
            a.download = 'somefilename.jpg';
            a.click();
          }
        });
    </script> -->
  </body>
</html>
